<!--  -->
<template>
    <div class="team-order">
        <Nav title="团队订单">
            <template v-slot:left>
                <span class="back" @click="$router.back()"></span>
            </template>
        </Nav>
        <div class="total flex justify-between aligin-center">
            <span>团队总人数:{{teamInfo.user_count}}人</span>
            <div class="date-wrapper" @click="showDate">
                <span>{{c_currentString}}</span>
                <span class="corner"></span>
            </div>
        </div>
        <div class="echarts-wrapper">
            <Echarts :optionData.sync="optionData" :type="2"></Echarts>
        </div>
        <div class="date">
            <div class="date-content flex justify-center aligin-center">{{month}}月</div>
            <div class="line-wrapper flex justify-center">
                <div class="line"></div>
            </div>
        </div>
        <TeamOrder :teamOrders.sync="teamOrders" v-if="teamOrders.length"></TeamOrder>
        <div class="no-data" v-else></div>
        <van-popup v-model="dateFlag" position="bottom">
            <van-datetime-picker
                v-model="currentDate"
                type="year-month"
                :formatter="formatter"
                @confirm="changeDate"
                @cancel="dateFlag=false"
            />
        </van-popup>
    </div>
</template>

<script>
import Nav from "../../components/Nav";
import Echarts from "../../components/Echarts";
import TeamOrder from "../../components/teamOrder";
import { teamDetail, teamOrder } from "../../api/api";
import Page from "../../mixin/page";
export default {
  components: { Nav, Echarts, TeamOrder },
  mixins: [Page],
  data() {
    return {
      optionData: { data: [] },
      dateFlag: false,
      currentDate: new Date(),
      currentString: "",
      isSticky: false,
      teamOrders: [],
      dateRequest: "",
      teamInfo: {},
      month:10,
    };
  },
  computed: {
    c_currentString() {
      if (!this.currentString) {
        let date = new Date();
        this.dateRequest = parseInt(date.getTime() / 1000);
        this.month=date.getMonth() + 1
        return `${date.getFullYear()}年 ${date.getMonth() + 1}月`;
      } else {
        return this.currentString;
      }
    }
  },
  watch: {},
  methods: {
    init() {
      var ua = navigator.userAgent.toLowerCase();
      var isWeixin = ua.indexOf("micromessenger") != -1;
      teamDetail({ date: this.dateRequest }).then(res => {
        this.teamInfo = res.data.result;
        let _data=res.data.result.user_list.map(item=>{return {name:item.nickname,value:item.total_money}})
        this.optionData = {
          data: {
            data:_data,
            total_money: res.data.result.total_money
          }
        };
        this._api();
      });

      window.onscroll = () => {
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        var windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        if (isWeixin) {
          if (scrollTop + windowHeight + 10 >= scrollHeight && scrollTop != 0) {
            this.pageToEnd();
          }
        } else {
          if (scrollTop + windowHeight + 56 >= scrollHeight && scrollTop != 0) {
            this.pageToEnd();
          }
        }
      };
    },
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      } else if (type === "month") {
        return `${value}月`;
      }
      return value;
    },
    showDate() {
      this.dateFlag = true;
    },
    _api() {
      if (this.isRequest) {
        return;
      }
      this.isRequest = true;
      teamOrder({
        page: this.current_page + 1,
        date: this.dateRequest
      }).then(
        res => {
          if (res.data.result.list && res.data.result.list.length != 0) {
            this.teamOrders = [...this.teamOrders, ...res.data.result.list];
            this.current_page += 1;
            this.last_page = this.current_page + 1;
          } else {
            this.last_page = this.current_page;
          }
          this.loading = false;
          this.isRequest = false;
        },
        res => {
          this.isRequest = false;
        }
      );
    },
    changeDate(value) {
      let date = new Date(value);
      this.dateRequest = parseInt(date.getTime() / 1000);
      this.month=date.getMonth() + 1
      this.currentString = `${date.getFullYear()}年 ${date.getMonth() + 1}月`;
      this.dateFlag = false;

      this.current_page=0
      this.last_page=1
      this.teamOrders=[]
      this.init()
    }
  },
  created() {},
  mounted() {
    this.init();
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.echarts-wrapper {
  height: 166px;
}
.total {
  padding: 0 18px;
  .date-wrapper {
    padding: 4px;
    border-radius: 4px;
    border: 1px solid #999;
    .corner { 
      margin-left: 4px;
      font-size: 0;
      height: 0;
      width: 0;
      border-right: 6px solid transparent;
      border-left: 6px solid transparent;
      border-top: 6px solid #999;
    }
  }
}
.date {
  padding-left: 10px;
  color: rgb(51, 51, 51);
  font-size: 20px;
  font-weight: bold;
  .date-content {
    width: 94px;
    height: 44px;
  }
  .line-wrapper {
    width: 94px;
    .line {
      width: 20px;
      height: 3px;
      border-radius: 1px;
      background: #ea373f;
    }
  }
}
.no-data{
    margin: 20px auto;
    width: 91px;
    height: 91px;
    background: url("../../assets/imgs/no-data.png");
    background-size: 100% 100%;
}
</style>